var Content = React.createClass({
	mixins: [UploadCDN()],
	getInitialState: function () {
		var contentData = this.props.options.contentData || {};

		return {
			id: contentData.id || '',
			name: contentData.name || '',
			description: contentData.description || '',
			logo: null,
			qrCode: null,
			background: null,
			colorBackground: contentData.colorBackground || '',
			textColor: contentData.textColor || '',
			animateMode: contentData.animateMode || 1,
			playSpeed: contentData.playSpeed || 1,
			iPhoneStyle: contentData.template || 'timeline',
			tempBackground: contentData.background || '',
			tempQrCode: contentData.qrCode || '',
			tempLogo: contentData.logo || '',
			tag_source: eval('(' + contentData.tag_source + ')') || [],
			tag: contentData.tag_authority || '',
			user_authority: contentData.user_authority || 1,
			is_auto_approve: contentData.settings.is_auto_approve || false,
			isLoading: false,
			message: null,
			logoType: null,
			qrCodeType: null,
			backgroundType: null,
			socialAccount: contentData.sources || []
		}
	},
	componentDidMount: function () {
		var self = this;

		refreshOfficialAccount = function (data) {
			var socialAccount = self.state.socialAccount;

			socialAccount.push(data);

			self.setState({
				socialAccount: socialAccount
			})
		}
	},
	addLoading: function () {
		this.setState({
			isLoading: true
		})
	},
	removeLoading: function (state) {
		this.setState(_.extend({
			isLoading: false
		}, state))
	},
	submit: function () {
		var self = this,
			state = this.state,
			uploadCDNCount = 0,
			complete = 0;

		if (state.name) {
			this.addLoading();

			var asyncList = {};

			if (state.background && state.backgroundType && !state.tempBackground) {
				asyncList.tempBackground = function (callback) {
					uploadAll(state.backgroundType, state.background, callback)
				}
			}

			if (state.qrCode && state.qrCodeType && !state.tempQrCode) {
				asyncList.tempQrCode = function (callback) {
					uploadAll(state.qrCodeType, state.qrCode, callback)
				}
			}

			if (state.logo && state.logoType && !state.tempLogo) {
				asyncList.tempLogo = function (callback) {
					uploadAll(state.logoType, state.logo, callback)
				}
			}

			async.parallel(asyncList, function (err, result) {
				self.setState(result, function () {
					$(self.refs.form).submit()
				})
			})

			function uploadAll(type, file, callback) {
				self.getUploadParam(type, function (uploadParam) {
					self.uploadCDN(file, uploadParam, function () {
						callback(null, uploadParam.url)
					})
				})
			}

		} else {
			this.removeLoading({
				message: {
					success: false,
					message: i18next.t('billboard.basic.fill_in_the_name')
				}
			})
		}
	},
	ChooseColorBG: function (val) {
		this.setState({
			animateMode: val
		})
	},
	ChoosePlaySpeed: function (val) {
		this.setState({
			playSpeed: val
		})
	},
	ChooseIPhoneStyle: function (val) {
		this.setState({
			iPhoneStyle: val
		})
	},
	render: function () {
		var options = this.props.options,
			socialAccount = options.socialAccount,
			contentData = options.contentData || {},
			self = this,
			state = this.state,
			appId = socialAccount.app_id,
			Plan = typeof plan != 'undefined' ? plan : null,
			backgroundCustomizable = (Plan && Plan.features) ? Plan.features.background_customizable : false;

		return (
			<div className="wall-edit-content">
				<div>
					<section className="content-header">
						<h1>{contentData.id ? i18next.t('billboard.editor_billboard') : i18next.t('billboard.build_billboard')}<small>{socialAccount.name}</small><a className="pull-right" href="/console">{i18next.t('billboard.return')}</a></h1>
					</section>
					<div className="content contentSTyle">
						<div className="row">
							<div className="col-md-12 wall-box">
								<div>
									<ul className="nav nav-tabs" role="tablist">
										<li className="LiStyleLI active" role="presentation"><a className="AStyle" href="#sitting" aria-controls="sitting" role="tab" data-toggle="tab">{i18next.t('billboard.basic.basic')}</a></li>
										{backgroundCustomizable ? <li className="LiStyleLI" role="presentation"><a className="AStyle" href="#phoneStyle" aria-controls="phoneStyle" role="tab" data-toggle="tab">{i18next.t('billboard.background.set_background')}</a></li> : ''}
										<li className="LiStyleLI" role="presentation"><a className="AStyle" href="#messages" aria-controls="messages" role="tab" data-toggle="tab" style={{ display: 'none' }}>{i18next.t('billboard.handset.templates')}</a></li>
										<li className="LiStyleLI" role="presentation"><a className="AStyle" href="#settings" aria-controls="settings" role="tab" data-toggle="tab">{i18next.t('billboard.handset.handset_pattern')}</a></li>
									</ul>
									<div className="tab-content">
										<div role="tabpanel" className="tab-pane active fade in" id="sitting" >
											<HeaderLable content={this} />
										</div>
										{backgroundCustomizable ? <div role="tabpanel" className="tab-pane fade" id="phoneStyle">
											<div className="box box-flat box-solid form-box boxStyle BGImage" style={{ color: state.textColor, backgroundImage: 'url(' + (state.colorBackground ? '' : state.tempBackground || state.base64Background) + ')', backgroundColor: state.colorBackground }}>
												<div className="box-body">
													<SettingBGPhoto app={this} />
												</div>
											</div>
										</div> : ''}

										<div role="tabpanel" className="tab-pane fade " id="messages">
											<div className="box box-flat box-solid form-box boxStyle ">
												<div className="box-body">
													<div className="weui_dialog weui_dialog_confirm setting settingWidth">
														<div className="weui_dialog_hd weui_dialog_maintitle divStrong">
															<strong className="weui_dialog_title strongStyle">{i18next.t('billboard.handset.templates')}</strong>
														</div>
														<div className="weui_dialog_bd">
															<div className="swatches">
																<div className={state.animateMode == 1 ? "swatch swatch_selected" : "swatch"} onClick={(function () { self.ChooseColorBG(1) })}>{i18next.t('play_mode.waterfall_flow.graphic')}</div>
																<div className={state.animateMode == 2 ? "swatch swatch_selected" : "swatch"} onClick={(function () { self.ChooseColorBG(2) })}>{i18next.t('play_mode.waterfall_flow.picture')}</div>
																<div className={state.animateMode == 3 ? "swatch swatch_selected" : "swatch"} onClick={(function () { self.ChooseColorBG(3) })}>{i18next.t('play_mode.waterfall_flow.pearl')}</div>
																<div className={state.animateMode == 4 ? "swatch swatch_selected" : "swatch"} onClick={(function () { self.ChooseColorBG(4) })}>{i18next.t('play_mode.waterfall_flow.gem')}</div>
																<div className="Divline"></div>
																<div className={state.animateMode == 5 ? "swatch swatch_selected" : "swatch"} onClick={(function () { self.ChooseColorBG(5) })}>{i18next.t('play_mode.screen_mode.or_so')}</div>
																<div className={state.animateMode == 6 ? "swatch swatch_selected" : "swatch"} onClick={(function () { self.ChooseColorBG(6) })}>{i18next.t('play_mode.screen_mode.big_picture')}</div>
																<div className={state.animateMode == 7 ? "swatch swatch_selected" : "swatch"} onClick={(function () { self.ChooseColorBG(7) })}>{i18next.t('play_mode.screen_mode.sphere')}</div>
															</div>
														</div>
														<div className="weui_dialog_hd weui_dialog_subtitle paddingV">
															<strong className="weui_dialog_title">{i18next.t('play_mode.model_general.playback_speed')}</strong>
														</div>
														<div className="weui_dialog_bd">
															<div className="swatches">
																<div className={state.playSpeed == 1 ? "swatch swatch_small swatch_selected" : "swatch swatch_small"} onClick={(function () { self.ChoosePlaySpeed(1) })}>{i18next.t('play_mode.model_general.fast')}</div>
																<div className={state.playSpeed == 2 ? "swatch swatch_small swatch_selected" : "swatch swatch_small"} onClick={(function () { self.ChoosePlaySpeed(2) })}>{i18next.t('play_mode.model_general.centre')}</div>
																<div className={state.playSpeed == 3 ? "swatch swatch_small swatch_selected" : "swatch swatch_small"} onClick={(function () { self.ChoosePlaySpeed(3) })}>{i18next.t('play_mode.model_general.slow')}</div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div role="tabpanel" className="tab-pane fade" id="settings">
											<div className="box box-flat box-solid form-box boxStyle">
												<div className="box-body">
													<div className="weui_dialog weui_dialog_confirm setting settingWidth">
														<div className="weui_dialog_hd weui_dialog_maintitle divStrong">
															<strong className="weui_dialog_title strongStyle">{i18next.t('billboard.handset.templates')}</strong>
														</div>
														<div className="weui_dialog_bd">
															<div className="swatches">
																<div className={state.iPhoneStyle == 'timeline' ? "swatch swatch_selected" : "swatch"} onClick={(function () { self.ChooseIPhoneStyle('timeline') })}>{i18next.t('billboard.handset.timeline')}</div>
																<div className={state.iPhoneStyle == 'mainlist' ? "swatch swatch_selected" : "swatch"} onClick={(function () { self.ChooseIPhoneStyle('mainlist') })}>{i18next.t('billboard.handset.clean')}</div>
																<div className={state.iPhoneStyle == 'path' ? "swatch swatch_selected" : "swatch"} onClick={(function () { self.ChooseIPhoneStyle('path') })}>{i18next.t('billboard.handset.path')}</div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>


									</div>
								</div>
								<div className="box-footer">
									<form ref="form" method="POST" action="/me/walls">
										<input type="hidden" name="id" value={state.id} />
										<input type="hidden" name="app_id" value={appId} />
										<input type="hidden" name="name" value={state.name} />
										<input type="hidden" name="description" value={state.description} />
										<input type="hidden" name="logo" value={state.tempLogo} />
										<input type="hidden" name="qrCode" value={state.tempQrCode} />
										<input type="hidden" name="background" value={state.tempBackground} />
										<input type="hidden" name="background_color" value={state.colorBackground} />
										<input type="hidden" name="tag_authority" value={state.tag} />
										<input type="hidden" name="user_authority" value={state.user_authority} />
										<input type="hidden" name="is_auto_approve" value={state.is_auto_approve} />
										<input type="hidden" name="template" value={state.iPhoneStyle} />
										<input type="hidden" name="sources" value={JSON.stringify(state.socialAccount)} />
									</form>
									<div className={"btn btn-flat pull-right " + (state.isLoading ? "btn-default" : "btn-primary")} onClick={this.submit}>{state.isLoading ? (contentData ? i18next.t('billboard.saveing') : i18next.t('billboard.creating')) : (contentData ? i18next.t('billboard.save') : i18next.t('billboard.create'))}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

		);
	}
});


/***************************/


var HeaderLable = React.createClass({
	changeName: function (e) {
		var content = this.props.content;
		content.setState({
			name: e.target.value
		})
	},
	changeDesc: function (e) {
		var content = this.props.content;
		content.setState({
			description: e.target.value
		})
	},
	changeLogo: function (e) {
		var self = this,
			content = this.props.content,
			reader = new FileReader();
		reader.onload = function () {
			content.setState({
				tempLogo: '',
				base64Logo: this.result,
				logo: e.target.files[0],
				logoType: e.target.files[0].type.split('/')[1]
			})
		};
		reader.readAsDataURL(e.target.files[0])
	},
	changeQrcode: function (e) {
		var self = this,
			content = this.props.content,
			reader = new FileReader();
		reader.onload = function () {
			content.setState({
				tempQrCode: '',
				base64QrCode: this.result,
				qrCode: e.target.files[0],
				qrCodeType: e.target.files[0].type.split('/')[1]
			})
		};
		reader.readAsDataURL(e.target.files[0])
	},
	changeTag: function (e) {
		var content = this.props.content;
		content.setState({
			tag: e.target.value
		})
	},
	changeUser: function (e) {
		var content = this.props.content;
		content.setState({
			user_authority: e.target.value
		})
	},
	changeIsAutoApprove: function (e) {
		var content = this.props.content;
		content.setState({
			is_auto_approve: e.target.checked
		})
	},
	setSocialAccount: function (type) {
		var content = this.props.content;

		$.get('/me/accounts?social_type=' + type, function (data) {
			if (data.success) {
				var accounts = data.data.accounts;
				if (accounts.length) {
					var account = accounts[0],
						socialAccount = content.state.socialAccount;

					socialAccount.push({
						type: type,
						social_id: account.social_id
					})

					content.setState({
						socialAccount: socialAccount
					})
				} else {
					var payload = data.data.payload;
					switch (type) {
						case 'wechat':
						case 'weibo':
							window.open(payload, "authorize", "width=1000px,height=800");
							break;
					}
				}
			}
		})
	},
	render: function () {
		var content = this.props.content,
			options = content.props.options,
			contentData = options.contentData || {},
			state = content.state,
			tag_source = state.tag_source,
			tag = state.tag,
			socialAccount = content.state.socialAccount;

		return (
			<div className="box box-flat box-solid form-box boxStyle">
				<div className="box-body">
					<div className="col-sm-10">
						<div className="form-group">
							<h4>{i18next.t('billboard.basic.select_source')}</h4>
							<div className="navbar">
								<parllayComponents.SocialAccount socialAccount={socialAccount} setSocialAccount={this.setSocialAccount} />
								<div className="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
									<div className="modal-dialog" role="document">
										<div className="modal-content">
											<div className="modal-header">
												<button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
												<h4 className="modal-title" id="myModalLabel">{i18next.t('billboard.basic.data_sources')}</h4>
											</div>
											<div className="modal-body">
												{i18next.t('billboard.basic.is_data_sources')}
											</div>
											<div className="modal-footer" >
												<button type="button" className="btn btn-default pull-right" data-dismiss="modal" style={{ margin: "0px 20px 20px 20px" }}>{i18next.t('billboard.cancel')}</button>
												<button type="button" className="btn btn-primary pull-right" data-dismiss="modal">{i18next.t('billboard.save')}</button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div className="form-group">
							<h4>{i18next.t('billboard.basic.billboard_name')}</h4>
							<input type="text" className="form-control" placeholder={i18next.t('billboard.basic.fill_in_the_name')} value={state.name} onChange={this.changeName} />
						</div>
						<div className="form-group">
							<h4>{i18next.t('billboard.basic.billboard_describtion')}</h4>
							<textarea className="form-control" style={{ resize: "none" }} rows="6" placeholder={i18next.t('billboard.basic.placeholder_describtion')} maxLength="140" value={state.description} onChange={this.changeDesc}></textarea>
						</div>
					</div>
					<div className="col-sm-2">
						<div className="form-group photo_upload_box">
							<label htmlFor="uploadLogo" title={i18next.t('billboard.basic.prompt_text')}>
								<div className="photo_upload">{state.tempLogo || state.base64Logo ? <img src={state.tempLogo || state.base64Logo} /> : ''}</div>
								<div className="btn btn-flat btn-xs btn-primary">{i18next.t('billboard.basic.upload_logo')}</div>
								<input id="uploadLogo" type="file" onChange={this.changeLogo} />
							</label>
						</div>
						<div className="form-group photo_upload_box">
							<label htmlFor="uploadQrcode" title={i18next.t('billboard.basic.qr_code_introduction')}>
								<div className="photo_upload">{state.tempQrCode || state.base64QrCode ? <img src={state.tempQrCode || state.base64QrCode} /> : ''}</div>
								<div className="btn btn-flat btn-xs btn-primary">{i18next.t('billboard.basic.qr_code')}</div>
								<input id="uploadQrcode" type="file" onChange={this.changeQrcode} />
							</label>
						</div>
					</div>
					<div className="col-sm-12">
						<div className="form-group">
							<h4>{i18next.t('billboard.basic.billboard_content')}</h4>
							<select className="form-control select2" style={{ "width": "25%" }} onChange={this.changeTag} defaultValue={tag}>
								<option key={-1}>{i18next.t('billboard.basic.all')}</option>
								{state.tag_source.map(function (item, index) {
									return (
										<option key={index} value={item.id}>{item.tag}</option>
									)
								})}
							</select>
						</div>
						<div className="form-group">
							<h4>{i18next.t('billboard.basic.permissions1')}</h4>
							<select className="form-control select2" onChange={this.changeUser} defaultValue={state.user_authority} style={{ "width": "25%" }}>
								<option key={1} value={1}>{i18next.t('billboard.basic.wechat_user')}</option>
								<option key={2} value={2}>{i18next.t('billboard.basic.administrato')}</option>
								<option key={3} value={3}>{i18next.t('billboard.basic.only_administrator')}</option>
							</select>
						</div>
						<div className="form-group">
							<h4>{i18next.t('billboard.basic.permissions2')}</h4>
							<select className="form-control select2" style={{ "width": "25%" }}>
								<option key={1} value={1}>{i18next.t('billboard.basic.wechat_user')}</option>
								<option key={2} value={2}>{i18next.t('billboard.basic.administrato')}</option>
								<option key={3} value={3}>{i18next.t('billboard.basic.only_administrator')}</option>
							</select>
						</div>
						<div className="form-group">
							<label htmlFor="autoApprove"><h4>{i18next.t('billboard.basic.is_auto_approve')}</h4></label>
							<input type='checkbox' onChange={this.changeIsAutoApprove} style={{ "margin-left": "5%" }} id="autoApprove" checked={state.is_auto_approve} />
						</div>
					</div>
					<div className="col-sm-4">
						<div></div>
					</div>
				</div>

			</div>
		)
	}
});

var BGColor = React.createClass({
	ChooseColor: function (val) {
		var color = this.props.color || {};
		color.setState({
			colorBackground: val,
			background: '',
			tempBackground: ''
		})
	},
	render: function () {
		var self = this;
		var event = this.props.event;
		return (
			<div className="swatches">
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col1 }} onClick={(function () { self.ChooseColor(event.Col1) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col2 }} onClick={(function () { self.ChooseColor(event.Col2) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col3 }} onClick={(function () { self.ChooseColor(event.Col3) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col4 }} onClick={(function () { self.ChooseColor(event.Col4) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col5 }} onClick={(function () { self.ChooseColor(event.Col5) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col6 }} onClick={(function () { self.ChooseColor(event.Col6) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col7 }} onClick={(function () { self.ChooseColor(event.Col7) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col8 }} onClick={(function () { self.ChooseColor(event.Col8) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col9 }} onClick={(function () { self.ChooseColor(event.Col9) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col10 }} onClick={(function () { self.ChooseColor(event.Col10) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col11 }} onClick={(function () { self.ChooseColor(event.Col11) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col12 }} onClick={(function () { self.ChooseColor(event.Col12) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col13 }} onClick={(function () { self.ChooseColor(event.Col13) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col14 }} onClick={(function () { self.ChooseColor(event.Col14) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col15 }} onClick={(function () { self.ChooseColor(event.Col15) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col16 }} onClick={(function () { self.ChooseColor(event.Col16) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col17 }} onClick={(function () { self.ChooseColor(event.Col17) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col18 }} onClick={(function () { self.ChooseColor(event.Col18) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col19 }} onClick={(function () { self.ChooseColor(event.Col19) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col20 }} onClick={(function () { self.ChooseColor(event.Col20) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col21 }} onClick={(function () { self.ChooseColor(event.Col21) })}></div>
			</div>
		)
	}
});
var TextColor = React.createClass({
	ChooseTextColor: function (val) {
		var TColor = this.props.colorText || {};
		TColor.setState({
			textColor: val
		})
	},

	render: function () {
		var self = this;
		var event = this.props.event;
		return (
			<div className="swatches">
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col1 }} onClick={(function () { self.ChooseTextColor(event.Col1) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col2 }} onClick={(function () { self.ChooseTextColor(event.Col2) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col3 }} onClick={(function () { self.ChooseTextColor(event.Col3) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col4 }} onClick={(function () { self.ChooseTextColor(event.Col4) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col5 }} onClick={(function () { self.ChooseTextColor(event.Col5) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col6 }} onClick={(function () { self.ChooseTextColor(event.Col6) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col7 }} onClick={(function () { self.ChooseTextColor(event.Col7) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col8 }} onClick={(function () { self.ChooseTextColor(event.Col8) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col9 }} onClick={(function () { self.ChooseTextColor(event.Col9) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col10 }} onClick={(function () { self.ChooseTextColor(event.Col10) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col11 }} onClick={(function () { self.ChooseTextColor(event.Col11) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col12 }} onClick={(function () { self.ChooseTextColor(event.Col12) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col13 }} onClick={(function () { self.ChooseTextColor(event.Col13) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col14 }} onClick={(function () { self.ChooseTextColor(event.Col14) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col15 }} onClick={(function () { self.ChooseTextColor(event.Col15) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col16 }} onClick={(function () { self.ChooseTextColor(event.Col16) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col17 }} onClick={(function () { self.ChooseTextColor(event.Col17) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col18 }} onClick={(function () { self.ChooseTextColor(event.Col18) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col19 }} onClick={(function () { self.ChooseTextColor(event.Col19) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col20 }} onClick={(function () { self.ChooseTextColor(event.Col20) })}></div>
				<div className="swatch swatch_small" style={{ backgroundColor: event.Col21 }} onClick={(function () { self.ChooseTextColor(event.Col21) })}></div>
			</div>
		)
	}
});

/*********************/
var BGPhoto = React.createClass({
	Choose: function (val) {
		/*var save =this.props.save || {},
            canvas = document.createElement('CANVAS'),
			ctx = canvas.getContext('2d'),
			img = new Image;
		img.crossOrigin = 'Anonymous';
		img.onload = function(){
			canvas.height = img.height;
			canvas.width = img.width;
			ctx.drawImage(img,0,0);
			var dataURL = canvas.toDataURL('image/png');
			save.setState({
				background : '',
				tempBackground : dataURL,
				colorBackground : ''
			});
			canvas = null;
		};
		img.src = val;*/
		var save = this.props.save;

		save.setState({
			background: '',
			tempBackground: val,
			colorBackground: ''
		});
	},
	render: function () {
		var self = this;
		var event = this.props.event;
		return (
			<div className="row">
				<h4 className="HMargin">{event.text}</h4>
				<div className="col-xs-6 col-md-3 divWidthHeight">
					<a href="javascript:void(0)" className="thumbnail marginNone">
						<img className="imgWidth img-responsive" src={event.SrcOne} onClick={(function () { self.Choose(event.Urlone) })} />
					</a>
				</div>
				<div className="col-xs-6 col-md-3 divWidthHeight">
					<a href="javascript:void(0)" className="thumbnail marginNone">
						<img className="imgWidth img-responsive" src={event.SrcTwo} onClick={(function () { self.Choose(event.Urltwo) })} />
					</a>
				</div>
				<div className="col-xs-6 col-md-3 divWidthHeight">
					<a href="javascript:void(0)" className="thumbnail marginNone">
						<img className="imgWidth img-responsive" src={event.SrcThree} onClick={(function () { self.Choose(event.Urlthree) })} />
					</a>
				</div>
				<div className="col-xs-6 col-md-3 divWidthHeight">
					<a href="javascript:void(0)" className="thumbnail marginNone">
						<img className="imgWidth img-responsive" src={event.SrcFour} onClick={(function () { self.Choose(event.Urlfour) })} />
					</a>
				</div>
				<div className="col-xs-6 col-md-3 divWidthHeight">
					<a href="javascript:void(0)" className="thumbnail marginNone">
						<img className="imgWidth img-responsive" src={event.SrcFive} onClick={(function () { self.Choose(event.Urlfive) })} />
					</a>
				</div>
				<div className="col-xs-6 col-md-3 divWidthHeight">
					<a href="javascript:void(0)" className="thumbnail marginNone">
						<img className="imgWidth img-responsive" src={event.SrcSix} onClick={(function () { self.Choose(event.Urlsix) })} />
					</a>
				</div>
				<div className="col-xs-6 col-md-3 divWidthHeight">
					<a href="javascript:void(0)" className="thumbnail marginNone">
						<img className="imgWidth img-responsive" src={event.SrcSeven} onClick={(function () { self.Choose(event.Urlseven) })} />
					</a>
				</div>
				<div className="col-xs-6 col-md-3 divWidthHeight">
					<a href="javascript:void(0)" className="thumbnail marginNone">
						<img className="imgWidth img-responsive" src={event.SrcEight} onClick={(function () { self.Choose(event.Urleight) })} />
					</a>
				</div>
			</div>
		);
	}
});

var TanChuKuang = React.createClass({
	BGPhoto: [{
		"id": "1",
		"text": i18next.t('billboard.background.film_stars'),
		"SrcOne": 'http://cdn2.parllay.cn/001.jpg?imageMogr2/thumbnail/200x300>',
		"SrcTwo": 'http://cdn2.parllay.cn/002.jpg?imageMogr2/thumbnail/200x300>',
		"SrcThree": 'http://cdn2.parllay.cn/003.jpg?imageMogr2/thumbnail/200x300>',
		"SrcFour": 'http://cdn2.parllay.cn/004.jpg?imageMogr2/thumbnail/200x300>',
		"SrcFive": 'http://cdn2.parllay.cn/005.jpg?imageMogr2/thumbnail/200x300>',
		"SrcSix": 'http://cdn2.parllay.cn/026.jpg?imageMogr2/thumbnail/200x300>',
		"SrcSeven": 'http://cdn2.parllay.cn/027.jpg?imageMogr2/thumbnail/200x300>',
		"SrcEight": 'http://cdn2.parllay.cn/028.jpg?imageMogr2/thumbnail/200x300>',

		"Urlone": 'http://cdn2.parllay.cn/001.jpg',
		"Urltwo": 'http://cdn2.parllay.cn/002.jpg',
		"Urlthree": 'http://cdn2.parllay.cn/003.jpg',
		"Urlfour": 'http://cdn2.parllay.cn/004.jpg',
		"Urlfive": 'http://cdn2.parllay.cn/005.jpg',
		"Urlsix": 'http://cdn2.parllay.cn/026.jpg',
		"Urlseven": 'http://cdn2.parllay.cn/027.jpg',
		"Urleight": 'http://cdn2.parllay.cn/028.jpg'
	}, {
		"id": "2",
		"text": i18next.t('billboard.background.flowers_plant'),
		"SrcOne": 'http://cdn2.parllay.cn/006.jpg?imageMogr2/thumbnail/200x300>',
		"SrcTwo": 'http://cdn2.parllay.cn/007.jpg?imageMogr2/thumbnail/200x300>',
		"SrcThree": 'http://cdn2.parllay.cn/008.jpg?imageMogr2/thumbnail/200x300>',
		"SrcFour": 'http://cdn2.parllay.cn/009.jpg?imageMogr2/thumbnail/200x300>',
		"SrcFive": 'http://cdn2.parllay.cn/010.jpg?imageMogr2/thumbnail/200x300>',
		"SrcSix": 'http://cdn2.parllay.cn/029.jpg?imageMogr2/thumbnail/200x300>',
		"SrcSeven": 'http://cdn2.parllay.cn/030.jpg?imageMogr2/thumbnail/200x300>',
		"SrcEight": 'http://cdn2.parllay.cn/031.jpg?imageMogr2/thumbnail/200x300>',

		"Urlone": 'http://cdn2.parllay.cn/006.jpg',
		"Urltwo": 'http://cdn2.parllay.cn/007.jpg',
		"Urlthree": 'http://cdn2.parllay.cn/008.jpg',
		"Urlfour": 'http://cdn2.parllay.cn/009.jpg',
		"Urlfive": 'http://cdn2.parllay.cn/010.jpg',
		"Urlsix": 'http://cdn2.parllay.cn/029.jpg',
		"Urlseven": 'http://cdn2.parllay.cn/030.jpg',
		"Urleight": 'http://cdn2.parllay.cn/031.jpg'
	}, {
		"id": "3",
		"text": i18next.t('billboard.background.cycle_world'),
		"SrcOne": 'http://cdn2.parllay.cn/011.jpg?imageMogr2/thumbnail/200x300>',
		"SrcTwo": 'http://cdn2.parllay.cn/012.jpg?imageMogr2/thumbnail/200x300>',
		"SrcThree": 'http://cdn2.parllay.cn/013.jpg?imageMogr2/thumbnail/200x300>',
		"SrcFour": 'http://cdn2.parllay.cn/014.jpg?imageMogr2/thumbnail/200x300>',
		"SrcFive": 'http://cdn2.parllay.cn/015.jpg?imageMogr2/thumbnail/200x300>',
		"SrcSix": 'http://cdn2.parllay.cn/032.jpg?imageMogr2/thumbnail/200x300>',
		"SrcSeven": 'http://cdn2.parllay.cn/033.jpg?imageMogr2/thumbnail/200x300>',
		"SrcEight": 'http://cdn2.parllay.cn/034.jpg?imageMogr2/thumbnail/200x300>',

		"Urlone": 'http://cdn2.parllay.cn/011.jpg',
		"Urltwo": 'http://cdn2.parllay.cn/012.jpg',
		"Urlthree": 'http://cdn2.parllay.cn/013.jpg',
		"Urlfour": 'http://cdn2.parllay.cn/014.jpg',
		"Urlfive": 'http://cdn2.parllay.cn/015.jpg',
		"Urlsix": 'http://cdn2.parllay.cn/032.jpg',
		"Urlseven": 'http://cdn2.parllay.cn/033.jpg',
		"Urleight": 'http://cdn2.parllay.cn/034.jpg'
	}, {
		"id": "4",
		"text": i18next.t('billboard.background.business_theme'),
		"SrcOne": 'http://cdn2.parllay.cn/101.jpeg?imageMogr2/thumbnail/200x300>',
		"SrcTwo": 'http://cdn2.parllay.cn/102.jpeg?imageMogr2/thumbnail/200x300>',
		"SrcThree": 'http://cdn2.parllay.cn/103.jpeg?imageMogr2/thumbnail/200x300>',
		"SrcFour": 'http://cdn2.parllay.cn/104.jpeg?imageMogr2/thumbnail/200x300>',
		"SrcFive": 'http://cdn2.parllay.cn/105.jpg?imageMogr2/thumbnail/200x300>',
		"SrcSix": 'http://cdn2.parllay.cn/106.jpeg?imageMogr2/thumbnail/200x300>',
		"SrcSeven": 'http://cdn2.parllay.cn/107.jpeg?imageMogr2/thumbnail/200x300>',
		"SrcEight": 'http://cdn2.parllay.cn/108.jpeg?imageMogr2/thumbnail/200x300>',

		"Urlone": 'http://cdn2.parllay.cn/101.jpeg',
		"Urltwo": 'http://cdn2.parllay.cn/102.jpeg',
		"Urlthree": 'http://cdn2.parllay.cn/103.jpeg',
		"Urlfour": 'http://cdn2.parllay.cn/104.jpeg',
		"Urlfive": 'http://cdn2.parllay.cn/105.jpg',
		"Urlsix": 'http://cdn2.parllay.cn/106.jpeg',
		"Urlseven": 'http://cdn2.parllay.cn/107.jpeg',
		"Urleight": 'http://cdn2.parllay.cn/108.jpeg'
	}, {
		"id": "5",
		"text": i18next.t('billboard.background.scenery_scenery'),
		"SrcOne": 'http://cdn2.parllay.cn/021.jpg?imageMogr2/thumbnail/200x300>',
		"SrcTwo": 'http://cdn2.parllay.cn/022.jpg?imageMogr2/thumbnail/200x300>',
		"SrcThree": 'http://cdn2.parllay.cn/023.jpg?imageMogr2/thumbnail/200x300>',
		"SrcFour": 'http://cdn2.parllay.cn/024.jpg?imageMogr2/thumbnail/200x300>',
		"SrcFive": 'http://cdn2.parllay.cn/025.jpg?imageMogr2/thumbnail/200x300>',
		"SrcSix": 'http://cdn2.parllay.cn/038.jpg?imageMogr2/thumbnail/200x300>',
		"SrcSeven": 'http://cdn2.parllay.cn/039.jpg?imageMogr2/thumbnail/200x300>',
		"SrcEight": 'http://cdn2.parllay.cn/040.jpg?imageMogr2/thumbnail/200x300>',

		"Urlone": 'http://cdn2.parllay.cn/021.jpg',
		"Urltwo": 'http://cdn2.parllay.cn/022.jpg',
		"Urlthree": 'http://cdn2.parllay.cn/023.jpg',
		"Urlfour": 'http://cdn2.parllay.cn/024.jpg',
		"Urlfive": 'http://cdn2.parllay.cn/025.jpg',
		"Urlsix": 'http://cdn2.parllay.cn/038.jpg',
		"Urlseven": 'http://cdn2.parllay.cn/039.jpg',
		"Urleight": 'http://cdn2.parllay.cn/040.jpg'
	}],
	getInitialState: function () {
		return {
			background: this.props.save.state.background,
			dataList: []
		};
	},
	changebackground: function (e) {
		var self = this,
			save = this.props.save,
			reader = new FileReader();
		reader.onload = function () {
			save.setState({
				background: e.target.files[0],
				tempBackground: '',
				colorBackground: '',
				base64Background: this.result,
				backgroundType: e.target.files[0].type.split('/')[1]
			});
		}

		reader.readAsDataURL(e.target.files[0])
	},
	componentDidMount: function () {
		var self = this;
		$(window).bind('scroll', function () {
			var scrollTop = $(window).scrollTop();
			var scrollHeight = $(document).height();
			var windowHeight = $(window).height();
			if (scrollTop + windowHeight >= scrollHeight - 30) {
				self.onLoad()
			}
		})
		this.onLoad()
	},
	//        page : 0,
	onLoad: function () {
		//      $.ajax({
		//          type: "GET",
		//          url: "",
		//          dataType: "json",
		//          data: { page : ++this.page},
		//          succsee : function (data){
		this.setState({
			dataList: this.state.dataList.concat(this.BGPhoto.splice(0, 5))
		})
		//          }.bind(this),
		//      })
	},

	render: function () {
		var self = this,
			save = this.props.save;
		return (
			<div id="float-button-class" className="pull-left floatButtonClass">
				<div className="tab-content">
					<div role="tabpanel" className="tab-pane fade in active" id="home">
						{this.state.dataList.map(function (event) {
							return (<BGPhoto save={save} key={event.id} event={event} />);
						})}
						<div className="row">
							<h4 className="HMargin">{i18next.t('billboard.background.local_image')}</h4>
							<div className="col-xs-6 col-md-3 divWidthHeight photo_upload_box">
								<div className="thumbnail marginNone photo_upload photoUploadStyle">
									<label htmlFor="uploadBackground" className='LableWH'>
										<input id="uploadBackground" type="file" onChange={this.changebackground} />
									</label>
									<p className="help-block">{i18next.t('billboard.background.ratio')}</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		);
	}
});



var SettingBGPhoto = React.createClass({
	BGColor: [{
		"id": "1",
		"Col1": "#333333",
		"Col2": "#7f7f7f",
		"Col3": "#c3c3c3",
		"Col4": "#f3f3f3",
		"Col5": "#ffffff",
		"Col6": "#8b0018",
		"Col7": "#f3152b",
		"Col8": "#ff7d3b",
		"Col9": "#fff14f",
		"Col10": "#00b159",
		"Col11": "#00a3e3",
		"Col12": "#434bc5",
		"Col13": "#a74a9f",
		"Col14": "#bc795c",
		"Col15": "#ffaec8",
		"Col16": "#ffc844",
		"Col17": "#efe4b5",
		"Col18": "#b0e54f",
		"Col19": "#95d9e8",
		"Col20": "#6f93bb",
		"Col21": "#c9bfe4"
	}],
	TColor: [{
		"id": "1",
		"Col1": "#333333",
		"Col2": "#7f7f7f",
		"Col3": "#c3c3c3",
		"Col4": "#f3f3f3",
		"Col5": "#ffffff",
		"Col6": "#8b0018",
		"Col7": "#f3152b",
		"Col8": "#ff7d3b",
		"Col9": "#fff14f",
		"Col10": "#00b159",
		"Col11": "#00a3e3",
		"Col12": "#434bc5",
		"Col13": "#a74a9f",
		"Col14": "#bc795c",
		"Col15": "#ffaec8",
		"Col16": "#ffc844",
		"Col17": "#efe4b5",
		"Col18": "#b0e54f",
		"Col19": "#95d9e8",
		"Col20": "#6f93bb",
		"Col21": "#c9bfe4"
	}],
	getInitialState: function () {
		return {
			colorBackground: '',
			textColor: '',
			dataList: [],
			dataListText: []
		};
	},
	componentDidMount: function () {
		var self = this;
		$(window).bind('scroll', function () {
			var scrollTop = $(window).scrollTop();
			var scrollHeight = $(document).height();
			var windowHeight = $(window).height();
			if (scrollTop + windowHeight >= scrollHeight - 30) {
				self.onLoad()
			}
		})
		this.onLoad()
	},
	//        page : 0,
	onLoad: function () {
		//      $.ajax({
		//          type: "GET",
		//          url: "",
		//          dataType: "json",
		//          data: { page : ++this.page},
		//          succsee : function (data){
		this.setState({
			dataList: this.state.dataList.concat(this.BGColor.splice(0, 30)),
			dataListText: this.state.dataListText.concat(this.TColor.splice(0, 30))
		});
		//          }.bind(this),
		//      })
	},
	render: function () {
		var app = this.props.app;
		return (
			<div {...this.props} className="col-sm-10 div-div divWidthStyle">
				<div id="qwe" className="form-group">
					<div id="float">


						<div style={{ display: 'none' }} className="weui_dialog_hd weui_dialog_subtitle">
							<strong className="weui_dialog_title">{i18next.t('play_mode.model_general.background_color')}</strong>
						</div>
						<div style={{ display: 'none' }} className="weui_dialog_bd">
							{this.state.dataList.map(function (event) {
								return (<BGColor color={app} key={event.id} event={event} />);
							})}
						</div>

						<div style={{ display: 'none' }} className="weui_dialog_hd weui_dialog_subtitle">
							<strong className="weui_dialog_title">{i18next.t('play_mode.model_general.text_color')}</strong>
						</div>
						<div style={{ display: 'none' }} className="weui_dialog_bd">
							{this.state.dataList.map(function (event) {
								return (<TextColor colorText={app} key={event.id} event={event} />);
							})}
						</div>
						<TanChuKuang save={app} />

					</div>
				</div>
			</div>
		);
	}
});
